<template>
 <view class="parent-container">
   <view class="table-container">
    <uni-table :data="ylDataList" border>
      <uni-tr>
        <uni-th style="font-size: 20rpx;" width="50rpx">编号</uni-th>
        <uni-th style="font-size: 20rpx;" width="120rpx">名称</uni-th>
        <uni-th style="font-size: 20rpx;" width="60rpx">参数值</uni-th>
        <uni-th style="font-size: 20rpx;" width="60rpx">报警值</uni-th>
        <uni-th style="font-size: 20rpx;" width="60rpx">状态</uni-th>
      </uni-tr>
      <uni-tr v-for="(item, index) in ylDataList" :key="index">
		  <uni-td style="font-size: 20rpx;">{{ item.no }}</uni-td>
          <uni-td style="font-size: 20rpx;">{{ item.name }}</uni-td>
          <uni-td style="font-size: 20rpx;">{{ item.currentValue + '/' + item.unit }}</uni-td>
          <uni-td style="font-size: 20rpx;">{{ item.warningValue + '/' + item.unit }}</uni-td>
          <uni-td style="font-size: 20rpx; position: relative;">
         <CardDataPoint
           :data="item.currentValue"
           :point="item.warningValue"
           :open="item.symbol"
           top=""
           left="30"
         ></CardDataPoint>
       </uni-td>
      </uni-tr>
    </uni-table>
  </view>
   </view>
</template>
<script setup>
import { ref, watch, inject } from 'vue';
import CardDataPoint from '@/components/point.vue';
import labTable from '@/mixins/table.json';
const props = defineProps({
    id: Number
});

const allData = inject('allData');
const ylDataList = ref([]);

watch(
  () => allData.value,
  (newVal, oldVal) => {
    let tmpData = props.id === 2 ? newVal.left_main : newVal.right_main;
    let tmpJson = props.id === 2 ? labTable.left_main : labTable.right_main;
    tmpData = tmpData || {};
    let datakey = Object.keys(tmpData).filter((item) => {
      return tmpJson[item] ? tmpJson[item].name.slice(-2) === '压力' : false;
    });
    let dataList = [];
    datakey.forEach((item, index) => {
      let tmpJson = props.id === 2 ? labTable.left_main : labTable.right_main;
      tmpData[item].unit = tmpJson[item].unit;
      tmpData[item].name = tmpJson[item].name;
      tmpData[item].no = tmpJson[item].no;
      dataList.push(tmpData[item]);
    });
    dataList.sort((p, n) => {
      return +p.columnname.substring(1) - +n.columnname.substring(1);
    });
    ylDataList.value = dataList;
  },
  {
    deep: true
  }
);
</script>
<style scoped>

.parent-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: 80%; /* 假设父组件高度为视口高度 */
}

.table-container {
  width: 90%; /* 可根据需要调整宽度 */
  height: 90%; /* 高度为父组件的一半 */
  overflow-y: auto; /* 内容超出高度时显示垂直滚动条 */
}
</style>